<template>
  <div>
    <div class="optionContent">
            <div>
                <p>唱片收藏架表达音乐品味</p>
                <p>布置唱片架<span class="iconfont icon-xiangyoujiantou arright"></span></p>
            </div>
            <div>
                <p>展示动态图片让别人了解你</p>
                <p>使用相册<span class="iconfont icon-xiangyoujiantou arright"></span></p>
            </div>
            <div>
                <p>大声说出你的愿望</p>
                <p>愿望清单<span class="iconfont icon-xiangyoujiantou arright"></span></p>
            </div>
    </div>
    <div class="info">
        <div class="infotitle">
            <h3>基本信息</h3>
            <span>领取村民证</span>
        </div>
        <div class="infoContent">
            <p>村龄: <span>4年(2017年08月注册)</span></p>
            <p>性别: <span>男</span></p>
            <p>地区: <span>广西 百色</span></p>
        </div>
        <div class="infoFooter">
            <span>查看全部</span><span class="iconfont icon-xiangyoujiantou arright"></span>
        </div>
    </div>
    <div class="taste">
        <div class="tasteTitle">
            <h3>音乐品味</h3>
        </div>
        <div class="tasteRank">
            <div class="tasteImg">
                <img src="" alt="">
            </div>
            <div class="tasteContent">
                <h4>听歌排行</h4>
                <p>累计听歌357首</p>
            </div>
        </div>
        <div class="tasteRank">
            <div class="tasteImg">
                <img src="" alt="">
            </div>
            <div class="tasteContent">
                <h4>我喜欢的音乐</h4>
                <p>154首，播放2602次</p>
            </div>
        </div>
    </div>
    <div class="foundList">
        <div class="foundTitle">
            <h3>创建的歌单 <span>(1个)</span></h3>
        </div>
        <div class="foundContent">
            <div class="foundImg">
                <img src="" alt="">
            </div>
            <div class="foundText">
                <h4>reol</h4>
                <p>50首,播放42次</p>
            </div>
        </div>
    </div>
    <div class="collectList">
        <div class="collectListTitle">
            <h3>收藏的歌单 <span>(13)</span></h3>
        </div>
        <div class="collectContent">
            <div class="ceImg">
                <img src="" alt="">
            </div>
            <div class="ceText">
                <h4>邦邦!</h4>
                <p>331首,By 樱栾阡陌，播放31.7万次</p>
            </div>
        </div>
        <div class="ceFooter">
            <span>查看全部</span><span class="iconfont icon-xiangyoujiantou arright"></span>
        </div>
    </div>
  </div>
</template>

<script>
export default {

}
</script>

<style lang="less">
    .optionContent{
        display: flex;
        justify-content: space-between;
        text-align: left;
        margin-bottom: 10px;
        div{
            width: 26%;
            background-color: #fff;
            padding: 15px 10px;
            border-radius: 10px;
            font-size: 14px;
            color: #686868;
            p:nth-child(1){
                padding-bottom: 60px;
                line-height: 24px;
            }
            p:nth-child(2){
                color: #f14e4f;
                .arright{
                    font-size: 14px;
                }
            }
        }
    }
    .info{
        width: 100%;
        background-color: #fff;
        border-radius: 10px;
        line-height: 30px;
        margin-bottom: 10px;
        .infotitle{
            display: flex;
            justify-content: space-between;
            align-items: center;
            line-height: 20px;
            padding:11px 15px;
            padding-bottom: 0px;
            h3{
                font-weight: 700;
            }
            span{
                border: 1px solid #999;
                border-radius: 20px;
                padding: 2px 6px;
                font-size: 12px;
            }
        }
        .infoContent{
            color: #979797;
            border-bottom: 1px solid #ddd;
            padding:11px 15px;
            p{
                span{
                    color: #5f5f5f;
                }
            }
        }
        .infoFooter{
            text-align: center;
            padding: 2px 0px;
            color: #a7a7a7;
            .arright{
                font-size: 13px;
            }
        }
    }
    .taste{
        width: 100%;
        background-color: #fff;
        border-radius: 10px;
        margin-bottom: 10px;
        .tasteTitle{
            h3{
                font-weight: 700;
                padding: 10px;
            }
        }
        .tasteRank{
            display: flex;
            padding: 10px;
            align-items: center;
            .tasteImg{
                width: 50px;
                height: 50px;
                border-radius: 10px;
                overflow: hidden;
                margin-right: 10px;
                img{
                    width: 100%;
                    height: 100%;
                }
            }
            .tasteContent{
                line-height: 20px;
                h4{
                    font-size: 16px;
                    font-weight: 700;
                }
                p{
                    font-size: 12px;
                    color: #939393;
                }
            }
        }
    }
    .foundList{
        width: 100%;
        background-color: #fff;
        border-radius: 10px;
        margin-bottom: 10px;
        .foundTitle{
            h3{
                font-weight: 700;
                padding: 10px;
                span{
                    font-size: 12px;
                    color: #aaaaaa;
                }
            }
        }
        .foundContent{
            display: flex;
            padding: 10px;
            align-items: center;
            .foundImg{
                width: 50px;
                height: 50px;
                border-radius: 10px;
                overflow: hidden;
                margin-right: 10px;
                img{
                    width: 100%;
                    height: 100%;
                }
            }
            .foundText{
                line-height: 20px;
                h4{
                    font-size: 16px;
                    font-weight: 700;
                }
                p{
                    font-size: 12px;
                    color: #939393;
                }
            }
        }
    }
    .collectList{
        width: 100%;
        background-color: #fff;
        border-radius: 10px;
        .collectListTitle{
            h3{
                font-weight: 700;
                padding: 10px;
                span{
                    font-size: 12px;
                    color: #aaaaaa;
                }
            }
        }
        .collectContent{
            display: flex;
            padding: 10px;
            align-items: center;
            border-bottom: 1px solid #ddd;
            .ceImg{
                width: 50px;
                height: 50px;
                border-radius: 10px;
                overflow: hidden;
                margin-right: 10px;
                img{
                    width: 100%;
                    height: 100%;
                }
            }
            .ceText{
                line-height: 20px;
                h4{
                    font-size: 16px;
                    font-weight: 700;
                }
                p{
                    font-size: 12px;
                    color: #939393;
                }
            }
        }
        .ceFooter{
            text-align: center;
            padding: 2px 0px;
            color: #a7a7a7;
            .arright{
                line-height: 30px;
                font-size: 13px;
            }
        }
    }
</style>